<style scoped>
    .dayChose{margin-bottom: 10px;display: inline-block;}
    .dayChose>div{display: inline-block;}
    .dayChose .el-radio{margin-right: 10px;}
    .dayChose span{line-height: 24px;display: inline-block;padding: 0px 5px;}
    .dayChose .el-form-item{margin-bottom: 0px;margin-right: 0px;}
    .dayChose .el-date-editor.el-input{width:140px;}
    .dayChose  .el-select{width: 100px}
  
</style>
<template>
    <div class="tax-code-tax-rate-page" v-loading.fullscreen.lock="fullscreenLoading" :element-loading-text="nowLangue.isLoading">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <!-- 工程替换 -->
            <el-tab-pane :label="nowLangue.productSwitch" name="1">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
                    <!--备件小类-->
                    <el-form-item :label="nowLangue.spareSmallClass" class="selectMB10">
                        <el-select size="mini" clearable :placeholder="nowLangue.pleaseSelect" v-model="formInline.categoryCode">
                            <el-option v-for="(subClass,index) in spareClassList" :key="index" :label="subClass.name" :value="subClass.code"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--工程替换组编码-->
                    <el-form-item :label="nowLangue.productReplaceGroupCode" class="selectMB10">
                        <el-input v-model="formInline.code" :placeholder="nowLangue.pleaseImport + nowLangue.productReplaceGroupCode"></el-input>
                    </el-form-item>
                    <!--备件编码-->
                    <el-form-item :label="nowLangue.spareCode" class="selectMB10">
                        <el-input v-model="formInline.materialCode" :placeholder="nowLangue.pleaseImport+nowLangue.spareCode"></el-input>
                    </el-form-item>
                    <div class="dayChose">
                        <!--创建日期-->
                        <el-form-item :label="nowLangue.createDate" class="selectMB10" >
                            <el-date-picker clearable type="date" :editable="false" @change="selectedCreateTimeBegin" v-model="formInline.createStartTime" :placeholder="nowLangue.pleaseSelect"></el-date-picker>
                        </el-form-item>
                        <span v-text="nowLangue.to"><!--至--></span>
                        <el-form-item label="" class="selectMB10" >
                            <el-date-picker clearable :editable="false" @change="selectedCreateTimeEnd" v-model="formInline.createEndTime"  type="date" :placeholder="nowLangue.pleaseSelect"></el-date-picker>
                        </el-form-item>
                    </div>
                    <el-form-item class="selectMB10">
                        <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="queryEngineer()" v-text="nowLangue.query"><!--查询--></el-button>
                    </el-form-item>
                </el-form>
                <!--表格-->
                <label class="default-label" v-text="nowLangue.engReplaceDetails"><!--工程替换组明细--></label>
                <!--新增按钮-->
                <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="createNew()" v-text="nowLangue.newAdd"><!--新增--></el-button>
                <el-button class="bolder outsideBtnBS" size="mini" type="danger" v-text="nowLangue.import"  @click="importFile"><!--导入--></el-button>
                <el-button class="bolder outsideBtnBS" size="mini" type="danger" :disabled="leadOutDisabled" v-text="nowLangue.leadOut"  @click="leadingOutMask"><!--导出--></el-button>
                <el-table :data="engReplaceData" border style="width: 100%;" v-loading.body="loading" :element-loading-text="nowLangue.isLoading">
                    <!--序-->
                    <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence" width="40"></el-table-column>
                    <!--操作-->
                    <el-table-column :label="nowLangue.operate" header-align="center" align="center" width="130">
                       <template scope="scope">
                           <!--禁用-->
                           <div class="operationItem bolder" v-if="scope.row.status != 10 && scope.row.active" @click="handleStatus(scope.$index,scope.row)" v-text="nowLangue.forbidden"></div>
                           <!--启用-->
                           <div class="operationItem bolder" v-else-if="scope.row.status != 10 && !scope.row.active" @click="handleStatus(scope.$index,scope.row)" v-text="nowLangue.enable"></div>
                           <div class="operationItem disabled bolder" v-if="scope.row.status == 10" v-text="nowLangue.enable"></div>
                           <!--修改-->
                           <div class="operationItem disabled bolder" v-if="scope.row.active" v-text="nowLangue.update"></div>
                           <!--修改-->
                           <div class="operationItem bolder" v-else @click="update(scope.$index,scope.row)" v-text="nowLangue.update"></div>
                           <!--查看-->
                           <div class="operationItem bolder"  @click="see(scope.$index,scope.row)" v-text="nowLangue.check"></div>
                        </template>
                    </el-table-column>
                    <!--设备小类-->
                    <el-table-column prop="categoryName" :label="nowLangue.appointClass" header-align="center" show-overflow-tooltip></el-table-column>
                    <!--工程替换组编码-->
                    <el-table-column prop="code" :label="nowLangue.productReplaceGroupCode" header-align="center" show-overflow-tooltip></el-table-column>
                    <!--工程替换组名称-->
                    <el-table-column prop="name" :label="nowLangue.productReplaceGroupName" header-align="center" show-overflow-tooltip></el-table-column>
                    <!--工程替换组参数及指标-->
                    <el-table-column prop="parameterAndIndex" :label="nowLangue.productReplaceGroupParm" header-align="center"  show-overflow-tooltip></el-table-column>
                    <!--创建人-->
                    <el-table-column prop="creatorName" :label="nowLangue.creator" header-align="center"  show-overflow-tooltip></el-table-column>
                    <!--创建时间-->
                    <el-table-column prop="createTime" :label="nowLangue.createTime" header-align="center"  show-overflow-tooltip width="160"></el-table-column>
                    <!--确认人-->
                    <el-table-column prop="updaterName" :label="nowLangue.confirmor" header-align="center"  show-overflow-tooltip ></el-table-column>
                    <!--确认时间-->
                    <el-table-column prop="updateTime" :label="nowLangue.confirmTime" header-align="center"  show-overflow-tooltip width="160"></el-table-column>
                </el-table>
                <el-pagination v-if="isPaging"  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3" :current-page="pageIndex"  :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage" :total="totalNumber"></el-pagination>
            </el-tab-pane>
            <!-- 自由条件查询 -->
            <el-tab-pane :label="nowLangue.freeConditionQuery" name="2">
                <el-form :inline="true" :model="formInlineFree" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
                    <!--产品线-->
                    <el-form-item :label="nowLangue.productLine" class="selectMB10">
                        <el-select size="mini" clearable :placeholder="nowLangue.pleaseSelect" v-model="formInlineFree.productLineId">
                            <el-option label="硬盘" value="硬盘"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--备件小类-->
                    <el-form-item :label="nowLangue.spareSmallClass" class="selectMB10">
                        <el-select size="mini" v-model="formInlineFree.subclass" clearable :placeholder="nowLangue.pleaseSelect">
                            <el-option label="硬盘" value="硬盘"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--备件编码-->
                    <el-form-item :label="nowLangue.spareCode" class="selectMB10">
                        <el-input v-model="formInlineFree.materialCode" :placeholder="nowLangue.pleaseImport+nowLangue.spareCode"></el-input>
                    </el-form-item>
                    <el-form-item class="selectMB10">
                        <el-button class="bolder outsideBtnBS selectAll" :disabled="selectFreeDisabled" size="mini" type="danger" @click="queryFree()" v-text="nowLangue.query"><!--查询--></el-button>
                    </el-form-item>
                </el-form>
                <!--表格-->
                <label class="default-label" v-text="nowLangue.freeSpareList">自由备件列表</label>
                <!--新增按钮-->
                <el-table :data="freeData" border style="width: 100%;" v-loading.body="loading2" element-loading-text="拼命加载中">
                    <!--序-->
                    <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence" width="40"></el-table-column>
                    <!--产品线-->
                    <el-table-column prop="productLineName" :label="nowLangue.productLine" header-align="center" show-overflow-tooltip></el-table-column>
                    <!--备件小类-->
                    <el-table-column prop="subclassName" :label="nowLangue.spareSmallClass" header-align="center" show-overflow-tooltip></el-table-column>
                    <!--备件编码-->
                    <el-table-column prop="materialCode" :label="nowLangue.spareCode" header-align="center"  show-overflow-tooltip></el-table-column>
                    <!--备件名称-->
                    <el-table-column prop="materialName" :label="nowLangue.spareName" header-align="center"  show-overflow-tooltip></el-table-column>
                </el-table>
                <el-pagination v-if="isPaging2"  @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page.sync="currentPage2" :current-page="pageIndex2"  :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage2" :total="totalNumber2"></el-pagination>
            </el-tab-pane>
        </el-tabs>
        <!--导入弹框-->
        <el-dialog :title="nowLangue.leadEngReplaceDetails" id="importFile" :visible.sync="importFileVisible" size="tiny"  :lock-scroll="false">
            <el-upload class="upload-demo"  :action="action" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
                <!--点击上传 -->
                <el-button size="mini" type="danger" v-text="nowLangue.clickUpload"></el-button>
                <!-- 只能上传excel文件-->
                <div slot="tip" class="el-upload__tip" v-text="nowLangue.uploadTip"></div>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                language:{
                    zh:{
                        "freeConditionQuery":"自由条件查询",
                        "productSwitch":"工程替换",
                        "productLine":"产品线",
                        "spareSmallClass":"备件小类",
                        "pleaseSelect":"请选择",
                        "pleaseImport":"请输入",
                        "spareCode":"备件编码",
                        "spareName":"备件名称",
                        "freeSpareList":"自由备件列表",
                        "query":"查询",
                        "productReplaceGroupCode":"工程替换组编码",
                        "productReplaceGroupName":"工程替换组名称",
                        "createDate":"创建日期",
                        "to":"至",
                        "newAdd":"新增",
                        "import":"导入",
                        "leadOut":"导出",
                        "forbidden":"禁用",
                        "enable":"启用",
                        "update":"修改",
                        "check":"查看",
                        "appointClass":"设备小类",
                        "productReplaceGroupParm":"工程替换组参数及指标",
                        "creator":"创建人",
                        "createTime":"创建时间",
                        "confirmor":"确认人",
                        "confirmTime":"确认时间",
                        "isLoading":"正在拼命加载中",
                        "sequence":"序",
                        "operate":"操作",
                        "engReplaceDetails":"工程替换组明细",                        
                        "leadEngReplaceDetails":"导入工程替换组明细",
                        "clickUpload":"点击上传",
                        "uploadTip":"只能上传excel文件"
                    },
                    en:{
                        "freeConditionQuery":"freeConditionQuery",
                        "productSwitch":"productSwitch",
                        "productLine":"productLine",
                        "spareSmallClass":"spareSmallClass",
                        "pleaseSelect":"pleaseSelect",
                        "pleaseImport":"pleaseImport",
                        "spareCode":"spareCode",
                        "spareName":"spareName",
                        "freeSpareList":"freeSpareList",
                        "query":"query",
                        "productReplaceGroupCode":"productReplaceGroupCode",
                        "productReplaceGroupName":"productReplaceGroupName",
                        "createDate":"createDate",
                        "to":"to",
                        "newAdd":"newAdd",
                        "import":"import",
                        "leadOut":"leadOut",
                        "forbidden":"forbidden",
                        "enable":"enable",
                        "update":"update",
                        "check":"check",
                        "appointClass":"appointClass",
                        "productReplaceGroupParm":"productReplaceGroupParm",
                        "creator":"creator",
                        "createTime":"createTime",
                        "confirmor":"confirmor",
                        "confirmTime":"confirmTime",
                        "isLoading":"isLoading",
                        "sequence":"sequence",
                        "operate":"operate",
                        "engReplaceDetails":"engReplaceDetails",
                        "leadEngReplaceDetails":"leadEngReplaceDetails",
                        "clickUpload":"clickUpload",
                        "uploadTip":"You can upload only Excel files"
                    }
                },
                nowLangue:{},
                // 查询表单
                formInline:{
                    categoryCode:"",//备件小类
                    code:"",//工程替换组编码
                    materialCode:"",//备件编码
                    createStartTime:"",
                    createEndTime:"",
                },
                formInlineFree:{
                    productLineId:"",
                    subclass:"",//备件小类CODE
                    materialCode:""
                },
                activeName: '1',
                engReplaceData:[],//工程替换集合
                freeData:[],//自由备件集合
                spareClassList:[],//备件小类集合

                //禁用
                selectDisabled:false,
                selectFreeDisabled:false,
                leadOutDisabled:false,
                // 分页
                loading:false,
                isPaging:true,    //是否显示分页
                pageIndex:1,    //当前页（必传）
                pageSize :10,   //每页多少条
                currentPage:1,    //当前显示3页
                currentPage3:3,
                totalNumber: 1,     //总条数
                totalPage:1,    //总页数

                loading2:false,
                isPaging2:true,    //是否显示分页
                pageIndex2:1,    //当前页（必传）
                pageSize2 :10,   //每页多少条
                currentPage2:1,    //当前显示3页
                currentPage2:3,
                totalNumber2: 1,     //总条数
                totalPage2:1,    //总页数


                action:"",
                fileList: [],
                importFileVisible:false
            };
        },
        created:function(){
            var _this=this;
            _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
        },
        computed:{
            languageType(){
                return this.$store.state.languageType;
            }
        },
        watch:{
            languageType(){
                var _this=this;
                _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
            }
        },
        //进入页面立即运行此方法
        mounted: function () {
            var _this = this;
            _this.$store.commit('currentActive', 'EngineeringReplacementTeam');
            // 上传地址
            _this.action=_this.metadata_service+"substituteGroup/import";
            //_this.dropSpareList();
            //_this.queryEngineer();
        },
        methods:{
            //备件小类查询
            dropSpareList(){
                var _this=this;
                $.ajax({
                    type:'GET',
                    url:_this.metadata_service+'subClass/findSubClassList',
                    cache:false,
                    dataType:'JSON',
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            _this.spareClassList=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            handleClick(tab, event) {
                if(this.activeName=='1'){
                    this.queryEngineer(); // 查询 工程替换组明细
                }else if(this.activeName=='2'){
                    this.queryFree();  // 查询  自由备件列表
                }
            },
            // 选择创建开始日期
            selectedCreateTimeBegin(val){
                this.formInline.createStartTime = val;
            },
            // 选择创建结束日期
            selectedCreateTimeEnd(val){
                this.formInline.createEndTime = val;
            },
            //查询
            queryEngineer(){
                var _this=this;
                 _this.loading=true;
                _this.loading2=false;
                _this.selectDisabled=true;
                 var tmp={
                     categoryCode:_this.formInline.categoryCode,
                     code:_this.formInline.code,
                     materialCode:_this.formInline.materialCode,
                     createStartTime:_this.formInline.createStartTime,
                     createEndTime:_this.formInline.createEndTime,
                     pageIndex:_this.pageIndex,
                     pageSize:_this.pageSize
                 };
                 $.ajax({
                     type: 'POST',
                     url: _this.metadata_service+"substituteGroup/queryProjectsstClusterByPage",
                     cache: false,
                     data:JSON.stringify(tmp),
                     dataType:'JSON',
                     contentType: "application/json;charset=utf-8",
                     success: function (data) {
                         _this.selectDisabled=false;
                         _this.loading=false;
                         if (data.success) {
                             _this.isPaging=true;
                             _this.totalPage=data.data.totalPage;
                             _this.totalNumber=data.data.totalNumber;
                             _this.engReplaceData=data.data.dataList;
                         }else{
                            _this.common.errorTip(data.errorMessage)
                         }
                     },
                     error:function(){
                         _this.loading=false;
                         _this.selectDisabled=false;
                     }
                 });
            },
            queryFree(){
                var _this=this;
                _this.loading=false;
                _this.loading2=true;
                _this.selectFreeDisabled=true;
                var tmp={
                    productLineId:_this.formInlineFree.productLineId,
                    subclass:_this.formInlineFree.subclass,
                    materialCode:_this.formInlineFree.materialCode,
                    pageIndex:_this.pageIndex2,
                    pageSize:_this.pageSize2
                };
                $.ajax({
                    type: 'POST',
                    url: _this.metadata_service+"substituteGroup/queryFreeSpares",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.selectFreeDisabled=false;
                            _this.loading2=false;
                            _this.isPaging2=true;
                            _this.totalPage2=data.data.totalPage;
                            _this.totalNumber2=data.data.totalNumber;
                            _this.freeData=data.data.dataList;
                        }else{
                            _this.selectFreeDisabled=false;
                            _this.loading2=false;
                            _this.common.errorTip(data.errorMessage);
                        }
                    },
                    error:function(err){
                        _this.selectFreeDisabled=false;
                        _this.loading2=false;
                        _this.common.errorTip("Error");
                    }
                });
            },
            //新增
            createNew(){
                // this.$router.push({ path: 'CreateEReplacementTeam', query: { plan: 'private' }})
                this.$router.push({ path: 'CreateEReplacementTeam'})
            },
            //导入按钮
            importFile(){
                var _this=this;
                _this.importFileVisible = true;
                _this.fileList=[];

            },
             //上传文件之前的钩子
            beforeAvatarUpload(file) {
                // console.log(file);
                const isExcel2007 = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                const isExcel2003 = file.type === 'application/vnd.ms-excel';
                if (!isExcel2007 && !isExcel2003) {
                    var errorMessage=_this.languageType=="zh"?'只能上传excel文件':'You can upload only Excel files';
                    this.$message.error(errorMessage);
                }
                return isExcel2007 || isExcel2003 ;
            },
            // 文件上传成功时的钩子
            handleAvatarSuccess(res, file) {
                 var _this=this;
                if(res.success){
                    var successMessage=_this.languageType=="zh"?'上传成功！':'Upload successfully!';
                    _this.common.successTip(successMessage);
                    _this.importFileVisible = false;
                    //上传成功刷新页面
                    _this.queryEngineer();  
                }else{
                    _this.fileList=[];
                    _this.common.errorTip(res.errorMessage);
                }
                // console.log(res);
                // console.log(file);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
             //导出
            leadingOutMask(){
                var _this=this;
                _this.leadOutDisabled=true;
                _this.fullscreenLoading=true;
                $.ajax({
                    type:'POST',
                    url:_this.metadata_service+'substituteGroup/Export?categoryCode='+_this.formInline.categoryCode+'&&code='+_this.formInline.code+'&&materialCode='+_this.formInline.materialCode+'&&createStartTime='+_this.formInline.createStartTime+'&&createEndTime='+_this.formInline.createEndTime,
                    cache:false,
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        _this.leadOutDisabled=false;
                        _this.fullscreenLoading=false;
                        window.location.href=_this.metadata_service+'substituteGroup/Export?categoryCode='+_this.formInline.categoryCode+'&&code='+_this.formInline.code+'&&materialCode='+_this.formInline.materialCode+'&&createStartTime='+_this.formInline.createStartTime+'&&createEndTime='+_this.formInline.createEndTime;
                        var successMessage=_this.languageType=="zh"?'导出成功':'Export successful';
                        _this.common.successTip(successMessage);
                    },
                    error:function(){
                        _this.leadOutDisabled=false;
                        _this.fullscreenLoading=false;
                        var errorMessage=_this.languageType=="zh"?'导出失败':'Export failure';
                        _this.common.errorTip(errorMessage);
                    }
                })
            },
            // 修改
            update(index,row){
                this.$router.push({ path: 'UpdateEReplacementTeam', query: { id: row.id}})
            },
            // 查看
            see(index,row){
                this.$router.push({ path: 'SeeEReplacementTeam', query: { id: row.id}})
            },
            // 操作启用禁用
            handleStatus(index, row){
                var _this=this;
                 if(row.active){
                    row.active = false;
                 }else{
                    row.active = true;
                 }
                 var tmp={id: row.id,status: row.active};
                 $.ajax({
                     type: 'POST',
                     url: _this.metadata_service+"substituteGroup/updateStatus",
                     cache: false,
                     data:JSON.stringify(tmp),
                     dataType:'JSON',
                     contentType: "application/json;charset=utf-8",
                     success: function (data) {
                         if (data.success) {
                             if(row.active){
                                 var successMessage1=_this.languageType=="zh"?'启用成功！':'Open Success';
                                 _this.common.successTip(successMessage1);
                             }else{
                                 var successMessage2=_this.languageType=="zh"?'禁用成功！':'Close Success';
                                 _this.common.successTip(successMessage2);
                             }
                         }else
                            _this.common.errorTip(data.errorMessage);
                    }
                 });
            },
            //分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.queryEngineer();
            },
            //点击页码分页查询点击事件
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.pageIndex=val;
                this.queryEngineer();
            },
            //分页
            handleSizeChange2(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize2=val;
                this.queryFree();
            },
            //点击页码分页查询点击事件
            handleCurrentChange2(val) {
                // console.log(`当前页: ${val}`);
                this.pageIndex2=val;
                this.queryFree();
            }
        }
    }
</script>



